<template>
  <div class="outer">
    <headers @back-click="back()" :headers="headers"></headers>
    <div class="fixed-section tab-section" ref="fixedTab">
      <div class="wrapper">
        <div @click="setIndex(0)" :class="{'active': activeIndex == 0}">图文详情</div>
        <div @click="setIndex(1)" :class="{'active': activeIndex == 1}">商品参数</div>
        <div @click="setIndex(2)" :class="{'active': activeIndex == 2}">用户评价</div>
      </div>
    </div>
    <scroll :topArea="44" :bottomArea="49" ref="choose" :pullDownRefresh="false" @pullingUp="onpullingUp" :probeType="3" :scrollTab="'scrollTab'" @showTab="showTab()" @hideTab="hideTab()">
      <div class="swiper-container" id="swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(c,index) in images" :key="c.id" @click="">
            <div class="swiper-img-wp">
              <img :src="c.url" :alt="lst.name">
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="proinfo-area">
        <div class="title">[{{lst.oldLevelStr}}] {{lst.name}}</div>
        <div class="money-area">
          <div class="display-rent">
            ¥ <span>{{checkPrice}}</span> / {{lst.leaseType == "DAILY" ? "天" : "月"}}</span> <span class="qi" v-if="!isPriceChecked">起</span>
          </div>
          <div class="price">价值: ¥{{(lst.originalPrice/100).toFixed(2)}}</div>
        </div>
        <div class="choose-sku" @click="chooseSku()">
          <div class="sku">
            {{ isPriceChecked ? "已选择" : "请选择"}}：{{realParam}}
          </div>
          <i class=" fa fa-ellipsis-h fa-lg"></i>
        </div>
        <div class="coupon-area">
          <div class="icon-font">优惠活动</div>
          <div>你有 <span style="color:#ff4000">{{couponNum}}</span> 张可用的优惠券,请在预约时使用</div>
        </div>
      </div>
      <div class="protocal">
        <div class="des-title" @click="showProtocal()">
          <div class="des-row">
            <div class="des-title-item" v-for="i in lst.characteristics" :key="i.id">
              <img :src="i.img" alt="icon">
              <p>{{i.name}}</p>
            </div>
          </div>
          <i class="fa fa-ellipsis-h fa-lg"></i>
        </div>
      </div>
      <div class="pic-section" v-if="lst.processImg">
          <img :src="lst.processImg" alt="流程图" @load="imgLoad()">
      </div>
      <div class="tab-section" id="scrollTab">
        <div class="wrapper">
          <div @click="setIndex(0)" :class="{'active': activeIndex == 0}">图文详情</div>
          <div @click="setIndex(1)" :class="{'active': activeIndex == 1}">商品参数</div>
          <div @click="setIndex(2)" :class="{'active': activeIndex == 2}">用户评价</div>
        </div>
      </div>
      <div ref="tabSection">
        <div class="pic-section1 chooseWrapper" v-if="activeIndex == 0 && detailImgList">
          <div v-html="detailImgList"></div>
        </div>
        <div class="param-section" v-else-if="activeIndex ==1 && productParams.length>0">
        <div>
          <div v-for="i in productParams"  :key="i.id" class="info-product" v-if="productParams.length>0">
            <div class="tup"><div class="title">{{i.name}}</div></div>
            <div class="cont">
              <div class="infoItem" v-for="n in i.parametersList" :key="n.id">
                  <span class="name">{{n.parameterName}}</span>
                  <span class="content"><i>{{n.parameterValue}}</i></span>
              </div>
            </div>
          </div>
        </div>
        </div>
        <div class="remark-section" v-else-if="activeIndex ==2 && productRemark.length>0">
        <div v-for="i in productRemark" :key="i.id">
            <div class="remark-row" >
                <div class="comnt-head">
                    <div class="headImg">
                        <img :src="i.headImageUrl" alt="头像" v-if="i.headImageUrl">
                        <img src="../../assets/img/comm/logo_bw.png" alt="" v-else>
                    </div>
                    <div class="info">
                      <span class="name">{{i.userName}}</span>
                      <div class="row-3">
                          <span class="star" :class="{'active':i.score>0}"></span>
                          <span class="star" :class="{'active':i.score>1}"></span>
                          <span class="star" :class="{'active':i.score>2}"></span>
                          <span class="star" :class="{'active':i.score>3}"></span>
                          <span class="star" :class="{'active':i.score>4}"></span>
                      </div>
                    </div>
                    <div class="content-time">
                      <span class="time rt">{{i.commentTime}}</span>
                    </div>
                </div>
                <div class="comnt-body">&emsp;&emsp;{{i.content}}</div>
                <div class="comnt-imgs" v-if="i.commentImgUrl&&i.commentImgUrl.length>0">
                    <div v-for="n in i.commentImgUrl" :key="n.id" class="cmtImg">
                        <img class="smallImg" :src="n.url" alt="评论图片">
                    </div>
                </div>
                <div class="reply-body">商家回复：{{i.replyContent}}</div>
            </div>
        </div>
        </div>
        <blank-page v-else :message="'亲，暂无评价哟~'">
          <img src="../../assets/img/comm/blank-7.png" alt="" slot="img">
        </blank-page>
      </div>
    </scroll>
    <div class="footer-section">
        <div class="foot">
            <span @click="goKefu()"><img src="../../assets/img/comm/head-icon.png" alt="" /><p>客服</p></span>
            <span v-if="!isFavor" @click="favorProduct()"><img src="../../assets/img/comm/white-fav.png" alt="收藏" /><p>收藏</p></span>
            <span v-if="isFavor"><img src="../../assets/img/comm/fav-active.png" alt="收藏" /><p>收藏</p></span>
        </div>
        <div class="start_invit button button-confirm" @click="confirm()" v-if="lst.enabled" :class="{'button-disable': !canSubmit}">立即下单</div>
        <div class="start_invit button button-confirm button-disable" v-if="!lst.enabled">补货中</div>
        <!-- <div class="start_invit button button-confirm" style="background:#ccc">补货中</div> -->
    </div>
    <popup v-model="isSelecting" width="100%">
      <div class="select-area">
        <div class="p-title">
          <div class="img-area">
            <img :src="headImg" alt="">
          </div>
          <div class="p-content">
            <div class="lease">¥ <span>{{checkPrice}}/{{lst.leaseType == "DAILY" ? "天" : "月"}}</span> <span v-if="!isPriceChecked">起</span></div>
            <div>{{ isPriceChecked ? "已选择" : "请选择"}}：{{realParam}}</div>
          </div>
        </div>
        <div class="sku-container">
          <div class="sku-sel">
            <div class="sku-item" v-for="(i,index) in proSkus" :key="i.id">
              <div class="name">{{i.title}}</div>
              <div class="content">
                <button v-for="p in i.content" :key="p.id" :class="{'checked': choosedSku[index]&& choosedSku[index].specificationContent == p.value}" @click="setParam(p,i,index)" :disabled="!checkParam(index,p)">{{p.value}}</button>
              </div>
            </div>
          </div>
          <div class="service" v-if="lst.accidentInsurance >0">
            <div class="title">增值服务</div>
            <div class="content">
              <div class="col-3">
                <div class="left-area">
                  <div class="icon">
                    <div></div>
                  </div>
                  <div>商品意外保险 ¥{{(lst.accidentInsurance/100).toFixed(2)}}(必选)</div>
                </div>
                <div class="right-area" @click="goProtocal()">用户租赁及服务协议</div>
              </div>
              <div class="col-1">
                保险规则详见用户租赁及服务协议
              </div>
            </div>
          </div>
        </div>
      </div>
    </popup>
    <popup v-model="isProtocal" width="100%" :popup-style="popUpStyle">
      <div class="protocal-content">
        <div class="protocal-title">服务协议</div>
        <div class="des-list" >
            <div class="des-list-item" v-for="i in lst.characteristics" :key="i.id">
                <p class="des-item-title">{{i.name}}</p>
                <p class="des-item-cont">
                    {{i.detail}}
                </p>
            </div>
        </div>
        <div class="protocal-button">
            <span @click="hideProtocal()" class="button">取消</span><span @click="hideProtocal()" class="button button-confirm">确定</span>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import blankPage from '@/components/blankPage'
import apiService from "@/api/homepage.js"
import nev from '@/utils/globle.js';
import { cookie } from 'vux';
import {getChooseData,getParamDetail,getRemarks,getPrice,getAllCoupon,checkFavor,doFavor,checkPriority} from "@/api/homepage.js"
import { Popup} from 'vux'
export default {
  name: "choose",
  data: function(){
    return {
      headers: {
        title: ""
      },
      lst: [],
      images: [],
      headImg: "",
      detailImgList: [],
      swiper1: {},
      isSelecting: false,
      isProtocal: false,
      activeIndex: 0,
      productParams: [],
      hasMore: true,
      pageSize: 10,
      pageNum: 1,
      productRemark: [],
      showParam: "",
      proSkus: [],
      realParam: "",
      proList: [],
      choosedSku: [],
      termSeled: '',
      selectedContent: [],
      checkPrice: 0,
      checkOrigin: 0,
      isPriceChecked: false,
      popUpStyle: {
        zIndex: 800
      },
      isAuthenticated: false,
      couponNum: 0,
      isFavor: false,
      canSubmit: true
    }
  },
  components: {
    Popup,
    blankPage
  },
  methods: {
    back: function(){
      this.$router.go(-1);
    },
    goProtocal: function(){
      this.$router.push({name: "orderProtocol"});
    },
    referFavor: function(){
      checkFavor(this.lst.merchantId,this.lst.id).then( data => {
        if(data.code == 200){
          this.isFavor = data.data;
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    goKefu: function(){
      this.$router.push({name: "Cservice"});
    },
    allCoupon: function(){
      getAllCoupon().then( data => {
        if(data.code == 200){
          this.couponNum = data.data.list.length;
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    favorProduct: function(){
      if(this.isFavor){
        return
      }
      if(!localStorage.token){
        this.$router.push({name: 'login'})
      }
      let param = {};
      param.merchantId =  this.lst.merchantId;
      param.goodsId = this.lst.id;
      doFavor(this.lst.merchantId,this.lst.id,param).then( data => {
        if(data.code == 200){
          this.isFavor = true;
          this.$vux.toast.show({
            text: "收藏成功",
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    onpullingUp: function(){
      if(this.activeIndex !=2){
        this.$refs.choose.forceUpdate(true);
      }else {
        if(!this.hasMore){
          this.$refs.choose.forceUpdate(true);
          return
        }else {
          this.loadMore();
        }
      }
    },
    imgLoad: function(){
      // 监听图片加载完成
       this.$nextTick(function(){
            this.$refs.choose.forceUpdate(true);
       })
    },
    hideProtocal: function(){
      this.isProtocal = false;
    },
    showProtocal: function(){
      this.isProtocal = true;
    },
    // 根据商户可用商品生成产品列表
    geneList: function(data){
      for(var i = 0;i<data.length; i++){
        var mapArr = data[i].split(',');
        var map = {};
        for(var j=0;j<mapArr.length;j++){
            if(j == mapArr.length-1){
                var tempdata = mapArr[j] + (this.lst.leaseType == "DAILY" ? "天" : "月");
                map[tempdata] = tempdata;
            }else {
                map[mapArr[j]] = mapArr[j];
            }
        }
        this.proList.push(map);
      }
    },
    showTab: function(){
        this.$refs.fixedTab.style.display = "block";
    },
    hideTab: function(){
      this.$refs.fixedTab.style.display = "none";
    },
    chooseData: function(){
      getChooseData(this.$route.params.id).then( data => {
        if(data.code == 200){
          this.lst = data.data;
          this.headers.title = this.lst.name;
          this.checkPrice = this.lst.leaseType == "DAILY" ? (this.lst.displayRent/100).toFixed(2) : (this.lst.displayRent*30/100).toFixed(2);
          this.headImg = this.lst.imgJson[0].url;
          this.makeShowSku(this.lst);
          this.geneList(this.lst.skuStr);
          this.images=this.lst.imgJson;
          this.images.forEach(function(item){
            item.url = item.url + '?x-oss-process=image/resize,m_lfit,w_' + window.innerWidth*2 + ',limit_1/format,webp/sharpen,100/interlace,1/quality,q_90';
          })
          this.setSlides();
          this.detailImgList = this.lst.introduceDetail;
          if(localStorage.token){
            this.referFavor();
          }
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    setSlides: function(){
      this.swiper1 =  new Swiper('#swiper1',{
          observer: true,
          touchRatio: 3,
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            bulletElement : 'li',
            bulletClass : 'my-bullet',
          }
      });
    },
    paramDetail: function(){
      getParamDetail(this.$route.params.id).then( data => {
        if(data.code == 200){
          this.productParams = data.data.list;
          this.$nextTick(function(){
            this.$refs.choose.forceUpdate(true);
          })
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    remarks: function(){
      this.pageNum = 1;
      getRemarks(this.$route.params.id,this.pageNum).then(data => {
        let self = this;
        this.productRemark = [];
        if(data.data){
          if(data.data.list.length<this.pageSize){
              this.hasMore = false;
          }else {
              this.hasMore = true;
          }
          data.data.list.forEach(function(value){
              var map = {
                  commentImgUrl:  value.commentImgUrl ? JSON.parse(value.commentImgUrl) : [],
                  commentTime: new Date(value.commentTime),
                  content: value.content,
                  headImageUrl: value.headImgUrl ? nev.imageServiceUrl + value.headImgUrl + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth/4) : "",
                  headImageShow: nev.imageServiceUrl + value.headImgUrl + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth/4),
                  replyContent: value.replyContent,
                  userName: value.userName,
                  score: value.score
              };
              map.commentImgUrl.forEach(function(item){
                  item.url = nev.imageServiceUrl + item.url +  '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth);
              })
              map.commentTime = map.commentTime.getFullYear() + '-' + (map.commentTime.getMonth()+1) + "-" + map.commentTime.getDate() + " " + map.commentTime.getHours() + ":" + (map.commentTime.getMinutes() == 0 ? "00" : map.commentTime.getMinutes());
              self.productRemark.push(map);
          })
          this.$nextTick(function(){
            this.$refs.choose.forceUpdate(true);
          })
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    loadMore: function(){
      this.pageNum ++ ;
      getRemarks(this.$route.params.id,this.pageNum).then(data => {
        let self = this;
        let tempList = [];
        if(data.data){
          if(data.data.list.length<this.pageSize){
              this.hasMore = false;
          }else {
              this.hasMore = true;
          }
          data.data.list.forEach(function(value){
              var map = {
                  commentImgUrl:  value.commentImgUrl ? JSON.parse(value.commentImgUrl) : [],
                  commentTime: new Date(value.commentTime),
                  content: value.content,
                  headImageUrl: value.headImgUrl ? nev.imageServiceUrl + value.headImgUrl + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth/4) : "",
                  headImageShow: nev.imageServiceUrl + value.headImgUrl + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth/4),
                  replyContent: value.replyContent,
                  userName: value.userName,
                  score: value.score
              };
              map.commentImgUrl.forEach(function(item){
                  item.url = nev.imageServiceUrl + item.url +  '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth);
              })
              map.commentTime = map.commentTime.getFullYear() + '-' + (map.commentTime.getMonth()+1) + "-" + map.commentTime.getDate() + " " + map.commentTime.getHours() + ":" + (map.commentTime.getMinutes() == 0 ? "00" : map.commentTime.getMinutes());
              tempList.push(map);
          })
          this.productRemark = this.productRemark.concat(tempList);
          this.$nextTick(function(){
            this.$refs.choose.forceUpdate(true);
          })
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.hasMore = false;
          this.$refs.choose.forceUpdate(true);
        }
      })
    },
    setIndex: function(i){
      this.activeIndex = i;
      if(i == 1){
        this.paramDetail();
      }else if( i == 2){
        this.remarks();
      }else {
        setTimeout(()=>{
          this.$nextTick(function(){
            this.$refs.choose.forceUpdate(true);
          })
        },10)
      }
    },
    chooseSku: function(){
      this.isSelecting = true;
    },
     // 生成页面显示sku
    makeShowSku: function(data){
        let self = this;
        for(var i=0;i<data.specificationJson.length;i++){
            var map = {};
            map.title = data.specificationJson[i].specificationName;
            map.id = data.specificationJson[i].specification;
            map.content = [];
            for(var j=0;j<data.specificationJson[i].specificationJson.length;j++){
                var map1 = {};
                if(data.specificationJson[i].specificationJson[j]){
                    map1.value = data.specificationJson[i].specificationJson[j];
                    map.content.push(map1);
                }
            }
            self.proSkus.push(map);
        }
        let lastSku = self.changeDate();
        self.proSkus.push(lastSku);
        self.proSkus.forEach(function(pam){
            if(!self.showParam){
                self.showParam = pam.title;
            }else {
                self.showParam =  self.showParam + "," + pam.title;
            }
        })
        self.realParam = self.showParam;
    },
    // 转换租期
    changeDate: function(){
        let sku = {};
        sku.title = "租期";
        sku.id = "specificationLast";
        let days = this.lst.leaseDays.split(',');
        if(this.lst.leaseType != "DAILY"){
            days.forEach(function(item,index){
                let map = {};
                map.value = parseFloat(item/30) + "月";
                days[index] = {...map};
            })
        }else {
            days.forEach(function(item,index){
                let map = {};
                map.value = item + "天";
                days[index] = {...map};
            })
        }
        sku.content = JSON.parse(JSON.stringify(days));
        return sku;
    },
    // 设置规格
    setParam: function(v,p,index){
      var map = {};
      map.specification = p.id;
      map.specificationName = p.title;
      map.specificationContent = !this.choosedSku[index] ? v.value : this.choosedSku[index].specificationContent == v.value ? "" : v.value;
      // 租期另外处理
      if(p.title == "租期"){
          this.termSeled = map.specificationContent;
      }
      if(map.specificationContent != ""){
          this.selectedContent.splice(index,1,map.specificationContent);
          this.choosedSku.splice(index,1,map);
      }else {
          this.selectedContent.splice(index,1,"");
          this.choosedSku.splice(index,1,"");
      }
      this.referPrice();
    },
    checkParam: function(index,p){
        if(this.proList.length == 0){
            return false;
        }
        let tempSelected = JSON.parse(JSON.stringify(this.selectedContent));
        let selSku = [];
        tempSelected.splice(index,1,p.value);
        tempSelected.forEach(function(item){
          if(item){
            selSku.push(item)
          }
        })
        let count1 = 0;
        for(let i=0;i<this.proList.length;i++){
            for(let j=0;j<selSku.length;j++){
                if(!(selSku[j] in this.proList[i])){
                    break;
                }else{
                    if(j==selSku.length-1){
                        count1++;
                    }
                }
            }
        }
        if(count1>0){
            return true;
        }else {
            return false;
        }
    },
    referPrice: function(){
      let seled = [];
      let tempSku = JSON.parse(JSON.stringify(this.choosedSku));
      let tempParam = "";
      tempSku.forEach(function(item){
        if(item){
          seled.push(item)
          if(!tempParam){
             tempParam = item.specificationContent;
          }else {
            tempParam = tempParam + "、" + item.specificationContent;
          }
        }
      })
      if(seled.length != this.proSkus.length){
        this.isPriceChecked = false;
        this.checkPrice = this.lst.leaseType == "DAILY" ? (this.lst.displayRent/100).toFixed(2) : (this.lst.displayRent*30/100).toFixed(2);
        this.realParam = this.showParam;
        return
      }
      this.realParam = tempParam;
      let queries = "?goodsId=" + this.$route.params.id;
      for(let i=0;i<this.choosedSku.length-1;i++){
        queries = queries+ "&" + this.choosedSku[i].specification + "=" + this.choosedSku[i].specificationContent;
      }
      queries = queries + "&leaseDay=" + (this.lst.leaseType == "DAILY" ? parseInt(this.choosedSku[this.choosedSku.length-1].specificationContent) : parseInt(this.choosedSku[this.choosedSku.length-1].specificationContent)*30);
      getPrice(queries).then( data => {
        if(data.code == 200){
          this.isPriceChecked = true;
          if(this.lst.leaseType == "DAILY"){
            this.checkPrice = (data.data.rent/100).toFixed(2);
          }else {
            this.checkPrice = (data.data.rent*30/100).toFixed(2);
          }
          this.checkOrigin = data.data.originalPrice;
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.isPriceChecked = false;
        }
      })
    },
    productGenerate: function(){
      let fullProduct = {};
      fullProduct.sku = JSON.parse(JSON.stringify(this.choosedSku));
      fullProduct.id = this.lst.id;
      fullProduct.type = this.lst.leaseType;
      fullProduct.imgUrl = this.lst.imgJson.length>0 ? this.lst.imgJson[0].url : [];
      fullProduct.oriPri = this.lst.originalPrice;
      fullProduct.name = this.lst.name;
      fullProduct.termSeled = this.termSeled;
      fullProduct.price =  this.lst.leaseType == "DAILY" ? this.checkPrice*100 : parseInt(this.checkPrice*100/30);
      fullProduct.insurance = this.lst.accidentInsurance;
      fullProduct.canBrrow = this.lst.borrowEnabled
      return fullProduct;
    },
    confirm: function(){
      if(!this.isPriceChecked){
        this.isSelecting = true;
      }else {
        if(!localStorage.token){
          this.$router.push({name: 'login'});
        }else {
          let fullProduct = this.productGenerate();
          localStorage.setItem('good',JSON.stringify(fullProduct));
          if(/AlipayClient/.test(window.navigator.userAgent)){
            this.getPersonInfo();
          }else  {
            this.$router.push({name: "notInAlipay"})
          }
          this.canSubmit = false;
        }
      }
    },
    getPersonInfo: function(){
      apiService.getUserInfo2().then( data => {
        if(data.code == 200){
          this.isAuthenticated = data.data.authenticated;
          if(this.isAuthenticated){
              this.priorityCheck();
          }else {
              this.$router.push({name:'personInfo', params: {id: this.$route.params.id}});
              this.canSubmit = true;
          }
        }else {
          this.canSubmit = true;
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    priorityCheck: function (){
      let params = {};
      params.needZhimaCertUrl = true;
      checkPriority(params).then( data => {
        if(data.code == 200){
          if(data.data.isAdmittance == "Y"){
            let infoData = {};
            infoData.id = this.$route.params.id;
            infoData.zhimaCertToken = data.data.zhimaCertToken;
            localStorage.infoData = JSON.stringify(infoData);
            window.location.href = data.data.zhimaCertUrl;
            setTimeout(function(){
              this.canSubmit = true;
            },200)
          }else if(data.data.isAdmittance == "N"){
            this.$router.push({name: "zhimaLow"});
            setTimeout(function(){
              this.canSubmit = true;
            },200)
          }else {
            this.$vux.toast.show({
              text: data.message,
              time: 1000,
              width: 'auto',
              // position: 'middle'
            })
            setTimeout(function(){
              this.canSubmit = true;
            },200)
          }
        }else {
          this.canSubmit = true;
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          setTimeout(function(){
              this.canSubmit = true;
          },200)
        }
      })
    }
  },
  mounted: function(){
    let urlPre = {
        name: this.$route.name,
        params: this.$route.params,
    }
    cookie.set('urlPre', JSON.stringify(urlPre));
    this.chooseData();
    if(localStorage.token){
      this.allCoupon();
    }
    this.$refs.tabSection.style.minHeight = window.innerHeight -170 + "px";
  }
}
</script>
<style lang="scss" scoped>
  .outer {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  #swiper1 {
    width: 100%;
    .swiper-slide
    {
      width: 100%;
    }

    .swiper-img-wp
    {
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 100%;
      background: #fff;
      overflow: hidden;

      & img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
      }
    }

  }
  // 分页器样式
  .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10px;
  }
  .proinfo-area {
    padding: 12px 16px;
    background: #fff;
    & .title {
      width: 330px;
      height: 20px;
      line-height: 20px;
      display:block;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      font-size: 16px;
      color: #333;
    }
    & .money-area {
      width: 100%;
      height: 46px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      & .display-rent {
        color: #ff4000;
        font-size: 13px;
        &>span {
          font-size: 20px
        }
        & .qi {
          font-size: 13px;
        }
      }
      & .price {
        font-size: 12px;
        color: #666
      }
    }
    & .choose-sku {
      width: 100%;
      height: 44px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #666;
      border-bottom: 1.1px solid #eee;
      border-top: 1.1px solid #eee;
      & .sku {
        font-size: 14px;
        width: 98%;
        line-height: 18px;
        display:block;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
    }
    & .coupon-area {
      width: 100%;
      height: 44px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #666;
      font-size: 14px;
      & .icon-font {
        height: 14px;
        line-height: 14px;
        padding: 1.1px 2px;
        border: 1.1px solid #69AFFF;
        color: #69AFFF;
        font-size: 10px;
        margin-right: 16px;
      }
    }
  }
  // 弹框样式
  .vux-popup-dialog  {
    overflow-y: visible
  }
  .select-area {
    background: #fff;
    max-height: 70%;
    box-sizing: content-box;
    & .p-title {
      height: 80px;
      position: absolute;
      border-bottom: 1.1px solid #eee;
      top:0;
      left:0;
      z-index: 100;
      background: #fff;
      padding: 0 16px;
      &>div {
        height: 80px;
        &.img-area {
          position: absolute;
          left: 16px;
          bottom: 19px;
          width: 80px;
          height: 80px;
          background: #eee;
          & img {
            width: 100%;
          }
        }
        &.p-content {
          width: 249px;
          padding-left: 94px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          & .lease {
            margin-bottom: 14px;
            font-size: 13px;
            color: #ff4000;
            &>span {
              font-size: 20px;
            }
          }
          &>div:last-child {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
    & .sku-sel {
      width: 100%;
      padding-bottom: 16px;
      & .sku-item {
        width: 100%;
        min-height: 71px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        & .name {
          font-size: 13px;
          color: #999;
          width: 25%;
        }
        & .content {
          width: 75%;
          & .checked {
            border: 1.1px solid #4c5b71;
            color: #4c5b71;
          }
          &>button {
            background: #fff;
            float: right;
            border: 1.1px solid #bbb;
            border-radius: 4px;
            padding: 7px 20px;
            color: #bbb;
            font-size: 13px;
            margin: 6px 0 6px 12px;
            &:focus {
              outline: none;
            }
            &:disabled {
              background: #eee;
              color: #bbb;
              border: 0;
              border: 1.1px solid #eee;
            }
          }
        }
      }
    }
  }
  .sku-container {
    max-height: 400px;
    padding: 0 16px;
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: content-box;
    padding-top: 80px;
    padding-bottom: 49px;
  }
  .service {
    width: 100%;
    border-top: 1.1px solid #eee;
    & .title {
      width: 100%;
      height: 47px;
      line-height: 47px;
      font-size: 13px;
      color: #666;
    }
    & .content {
      width: 100%;
      & .col-3 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #666;
        margin-bottom: 7px;
        height: 26px;
        & .right-area {
          color: #69afff;
        }
        & .left-area {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          & .icon {
            height: 16px;
            width: 16px;
            border: 1.1px solid #4c5b71;
            border-radius: 50%;
            margin-right: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            &>div {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: #4c5b71;
            }
          }
        }
      }
      & .col-1 {
        width: 100%;
        font-size: 12px;
        color: #999;
        padding-left: 32px;
        margin-bottom: 28px;
      }
    }
  }
  .buttons {
    height: 49px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 16px;
    background: #fff;
    z-index: 100;
  }
  .protocal {
    background: #fff;
    padding: 0 16px;
    margin-top: 10px;
    & .des-title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #666;
      & .des-row {
        height: 77px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 94%;
        & .des-title-item {
          width: 25%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          &>img {
            width: 34px;
            height: 34px;
          }
          &>p {
            margin-top: 8px;
            color: #999;
            font-size: 12px;
            text-align: center;
          }
        }
      }
    }
  }
  .pic-section {
    width: 100%;
    &>img {
      width: 100%;
    }
  }
  .pic-section1 {
    width: 100%;
    & img {
      width: 100%;
    }
  }
  .tab-section {
    margin-top: 12px;
    width: 100%;
    height: 44px;
    & .wrapper {
      background: #fff;
      height: 44px;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      &>div {
        width: 33.333%;
        font-size: 14px;
        color: #999;
        text-align: center;
        &:not(:last-child){
          border-right: 1.1px solid #eee;
        }
      }
      & .active {
        color: #4C5B71;
      }
    }
  }
  .fixed-section {
    margin-top: 44px;
    z-index: 300;
    position: fixed;
    top: 0;
    left:0;
    right:0;
    border-bottom: 1.1px solid #eee;
    border-top: 1.1px solid #eee;
    display: none;
  }
  .pic-section {
    width: 100%;
    & img {
      width: 100%;
    }
  }
  .param-section {
    width: 100%;
    & .info-product {
      margin-top: 10px;
      width: 100%;
      background: #fff;
      padding: 0 16px;
      padding-bottom: 16px;
      & .tup {
        height: 42px;
        width: 100%;
        line-height: 42px;
        font-size: 14px;
        color: #333;
      }
      & .cont {
        width: 100%;
        border-top: 1.1px solid #eee;
        & .infoItem {
          line-height: 32px;
          font-size: 13px;
          color: #999;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          & .name {
            width: 40%;
          }
          & .content {
            width: 50%;
            color: #333;
          }
        }
      }
    }
  }
  .remark-section {
    background: #fff;
    padding: 0 16px;
    padding-bottom: 16px;
    border: 1.1px solid #eee;
    margin-top: 10px;
    box-sizing: content-box;
    &>div {
      width: 100%;
      box-sizing: content-box;
      & .remark-row {
        width: 100%;
        & .comnt-head {
          height: 54px;
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          & .headImg {
            width: 30px;
            height: 30px;
            overflow: hidden;
            margin-right: 12px;
            border-radius: 50%;
            &>img {
              width: 100%;
            }
          }
          & .info {
            width: 205px;
            & .name {
              font-size: 14px;
              color: #333;
            }
            & .row-3 {
              width: 100%;
              margin-top: 4px;
              &>span {
                float: left;
                height: 12px;
                width: 12px;
                margin-right: 4px;
                background: url("../../assets/img/lease/star.png") 0 0 no-repeat;
                background-size: 200%;
                background-position: 100% 0;
              }
              & .active {
                  background-position: 0 0;
              }
            }
          }
          & .content-time {
            width: 95px;
            font-size: 12px;
            color: #999;
          }
        }
        & .comnt-body {
          width: 100%;
          padding: 0 8px;
          font-size: 12px;
          line-height: 17px;
          color: #666;
          margin-bottom: 12px;
        }
      }
      & .comnt-imgs {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 70px;
        & .cmtImg {
          height: 100%;
          width: 70px;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          &:not(:last-child){
            margin-right: 12px;
          }
          &>img {
            width: 100%;
            border-radius: 5px;
          }
        }
      }
      & .reply-body {
        padding: 8px;
        background: rgba(238,238,238,0.60);
        font-size: 12px;
        line-height: 17px;
        border-radius: 5px;
        color: #666;
        margin-top: 12px;
      }
    }
  }
  .footer-section {
    border-top: 1.1px solid #eee;
    background: #fff;
    padding: 0 16px;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: 49px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 600;
    & .foot {
      width: 103px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      & span {
        font-size: 12px;
        width: 30px;
        color: #666;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &:not(:last-child){
          margin-right: 28px;
        }
        & img {
          width: 20px;
          height: 20px;
        }
      }
    }
    & .start_invit {
      width: 240px;
    }
  }
  .protocal-content {
    background: #fff;
    padding: 0 16px;
    box-sizing: content-box;
    & .protocal-title {
      height: 50px;
      font-size: 14px;
      color: #666;
      line-height: 50px;
      text-align: center;
      border-bottom: 1.1px solid #eee;
    }
    & .des-list {
        padding: 12px 16px;
        font-size: 12px;
        & .des-list-item {
          &:not(:first-child){
            margin-top: 12px;
          }
          & .des-item-title {
            width: 100%;
            height: 22px;
            color: #333;
            line-height: 22px;
          }
          & .des-item-cont {
            width: 100%;
            line-height: 22px;
            color: #666;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
    }
    & .protocal-button {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 49px;
    }
  }
</style>
